<template>
  <div class="data_analysis">
    <!--    头部-->
    <header_component @click="screenfull_btn"/>
    <div :style="{'height':'1rem'}"></div>
    <div class="data_analysis_line">
      <echart_line />
    </div>
    <!--    中间的内容区域-->
    <div class="data_analysis_flex_box">
      <div class="item_box">
        <!--           设备状态分布统计-->
        <div :class="store.state.globalStore.full_screen?'left_pie':'left_pie_min'">
          <echart_pie/>
        </div>
        <!--        <div :style="{height: '1rem'}"></div>-->
        <div :class="store.state.globalStore.full_screen?'bottom_pie':'bottom_pie_min'">
          <div class="echarts_title">
            设备焊接参数异常统计
          </div>
          <exception_bar/>
        </div>
      </div>
      <div class="center_flex_box">
        <div :class="store.state.globalStore.full_screen?'left_pie':'left_pie_min'">
          <auto_bar/>
        </div>
        <!--        <div :style="{height: '1rem'}"></div>-->

        <div :class="store.state.globalStore.full_screen?'bottom_pie':'bottom_pie_min'">
          <div class="echarts_title">
            维保倒计时
          </div>
          <maintain_pie/>
        </div>
      </div>
      <div class="item_box right_box_back">
        <div :style="{padding:'1rem'}" style="cursor: pointer">
          <div class="echarts_title">
            设备状态管理-{{ data_analysis.dateTime }}
          </div>
          <div class="table_header">
            <div class="item_header" :style="{width:'15%'}">
              设备编号
            </div>
            <div class="item_header" :style="{width:'15%'}">
              设备名称
            </div>
            <div class="item_header" :style="{width:'15%'}">
              操作者
            </div>
            <div class="item_header" :style="{width:'55%'}">
              <!--设备状态-->
              <status_device/>
              <!--              设备状态-->
            </div>
          </div>
          <!--          <device canvas="device2"/> -->
          <div class="demo-list">
            <div v-if="false" class="rowup">
              <device_slicing/>
            </div>
            <device_slicing v-if="true"/>
          </div>
        </div>
      </div>
    </div>
    <div class="project_run" @click="change_pause">
      <span style="font-size: 16px;margin-right: 1rem" v-if="!data_analysis.pause">与服务器建立连接中</span>
      <span style="font-size: 16px;margin-right: 1rem" v-if="data_analysis.pause">与服务器断开</span>
      <PlayCircleOutlined v-if="data_analysis.pause"/>
      <PauseCircleOutlined v-if="!data_analysis.pause"/>

    </div>
  </div>
</template>

<script>
// import Home from "@/views/home/Home";
import header_component from "@/components/header/header_component";
import echart_line from "@/components/echart_components/echart_line";
import echart_pie from "@/components/echart_components/echart_pie";
import auto_bar from "@/components/echart_components/auto_bar";
import screenfull from "screenfull";
import {useStore} from "vuex"
import {defineComponent, reactive, onMounted, ref} from "vue"
import MaintenanceCountdown from "@/components/MaintenanceCountdown";
import device from "@/components/echart_components/device";
import device_slicing from "@/views/cockpit/device_slicing";
import status_device from "@/components/device/status_device";
import exception_list from "@/components/echart_components/exception_list";
import exception_bar from "@/components/echart_components/exception/exception_bar";
import maintain_pie from "@/components/echart_components/bottom_echarts/maintain_pie";
import {
  PlayCircleOutlined,
  PauseCircleOutlined
} from '@ant-design/icons-vue';

export default defineComponent({
  name: "data_analysis",
  setup() {

    const store = useStore()
    const data_analysis
        = reactive({
      isFullscreen: false,
      maintenanceList: [1, 23, 3, 3, 3],
      pause: false,
      dateTime: `${new Date().getHours()}:00-${new Date().getHours() + 1}:00`
    });
    /**
     * 是否全屏并按键ESC键的方法
     */
    const screenfull_btn = () => {
      if (screenfull.enabled) {
        console.log("错误")
        return false
      }
      data_analysis.isFullscreen = true
      screenfull.toggle()
    };
    const checkFull = () => {
      let isFull = screenfull.isFullscreen || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      console.log(screenfull.isFullscreen)
      if (isFull === undefined) {
        isFull = false
        return isFull
      }
      return isFull
    };
    window.onresize = () => {
// 全屏下监控是否按键了ESC
//       console.log("按下ESC")
      if (!checkFull()) {
// 全屏下按键esc后要执行的动作
        data_analysis.isFullscreen = false
        console.log("全屏关闭")
        store.commit("SET_SCREEN", false)
      } else {
        console.log("全屏开启")
        store.commit("SET_SCREEN", true)
      }
    };

    const change_pause = () => {
      data_analysis.pause = !data_analysis.pause
    }

    /**
     * 初始化
     * */
    let flash = ref(false);

    onMounted(() => {
      flash.value = false;
      console.log("执行了")
      flash.value = true;
    })


    return {
      screenfull_btn,
      data_analysis,
      change_pause,
      store,
      flash
    }
  },

  components: {
    // Home
    header_component,
    echart_line,
    echart_pie,
    auto_bar,
    MaintenanceCountdown,
    device,
    device_slicing,
    status_device,
    exception_list,
    exception_bar,
    maintain_pie,
    PlayCircleOutlined,
    PauseCircleOutlined
  },

})
</script>

<style scoped lang="scss">
.data_analysis {
  position: relative;
}

.project_run {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  //background: #67e1fa;
  //line-height: 1rem;
  display: flex;
  align-items: center;
}

.project_run:hover {
  color: #67e1fa;
}

.echarts_title {
  color: #3a7bd5;
  font-size: 1.2rem;
  font-weight: bolder;
}

.table_header {
  display: flex;
  flex-direction: row;
  width: 100%;
  //font-size: 1.0rem;
  color: white;

  .item_header {
    border: 0.001rem #16d1ff dashed;
    width: 20%;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
